<template>
	<!-- 搜索商品和优惠券信息 -->
	<div>
		<el-form
			ref="form"
			:model="ruleForm"
			:rules="rules"
			:label-width="labelWidth + 'px'"
			size="mini"
		>
			<el-form-item label="商品链接" prop="url">
				<el-row>
					<el-col :span="20">
						<el-input
							clearable
							placeholder="请输入商品链接"
							v-model="ruleForm.url"
						></el-input>
					</el-col>
					<el-col :span="4">
						<el-button
							style="margin-left:10px"
							type="success"
							:loading="couponLoading"
							@click="submitForm('form')"
							>商品检索</el-button
						>
					</el-col>
				</el-row>
			</el-form-item>
			<el-form-item label="优惠券链接" prop="couponUrl" v-if="platform == 'jd'">
				<el-row>
					<el-col :span="20">
						<el-input
							clearable
							placeholder="请输入商品优惠券链接"
							v-model="ruleForm.couponUrl"
						></el-input>
					</el-col>
					<el-col :span="4">
						<el-button
							style="margin-left:10px"
							type="success"
							:loading="couponLoading"
							@click="serachCoupon"
							>优惠券检索</el-button
						>
					</el-col>
				</el-row>
			</el-form-item>
			<el-form-item label="佣金比例" prop="commissionShare">
				<el-row>
					<el-col :span="10">
						<div class="commissionShare-number">
							<el-input-number
								v-model="ruleForm.commissionShare"
								controls-position="right"
								:min="0"
								:max="100"
							></el-input-number>
							<div v-if="goodsInfo.endPrice">
								佣金
								{{ preCommission }}
							</div>
						</div>
					</el-col>
				</el-row>
			</el-form-item>
		</el-form>
		<!-- 商品信息 -->
		<div class="goods-info" v-if="showGoodsInfo">
			<div class="info-box">
				<div class="info-img">
					<img :src="goodsInfo.skuImage" alt />
				</div>
				<div class="info-c">
					<div>
						<div>{{ goodsInfo.skuName }}</div>
						<div>月销量：{{ goodsInfo.sale }}件</div>
					</div>
					<div>{{ goodsInfo.shopName }}</div>
					<div>商品ID：{{ goodsInfo.skuId }}</div>
					<div>
						<div>
							原价：
							<span>{{ goodsInfo.price }}</span>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!-- </el-row> -->
		<div class="coupon-info" v-for="(item, index) in couponList" :key="index">
			<div class="coupon-info-c">
				<div>
					<el-radio v-model="selects.coupon" :label="item._id">
						优惠券金额：<span style="color:red">{{ item.discount }}</span>
					</el-radio>
				</div>
				<div>
					优惠券数量：
					<span style="color:red">{{ item.couponNum }}</span>
				</div>
				<div>
					&nbsp;&nbsp; 剩余数量：
					<span style="color:red">
						{{ item.couponReceive }}
					</span>
				</div>
				<div>
					优惠券
					<i class="el-icon-copy-document" v-copy="item.link" title="复制商品名称"></i>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
export default {
	data() {
		return {
			selects: {
				coupon: null
			},
			ruleForm: {
				couponUrl: '',
				url: '',
				gid: '',
				commissionShare: ''
			},
			rules: {
				url: [{ required: true, message: '请输入商品链接', trigger: 'blur' }],
				// couponUrl:[{ required: true, message: '请输入优惠券链接', trigger: 'blur' }],
				commissionShare: [{ required: true, message: '请输入佣金比例', trigger: 'blur' }]
			},
			showGoodsInfo: false,
			couponLoading: false,
			couponInfo: {},
			goodsInfo: {},
			preCommission: '',
			couponList: []
		};
	},
	props: {
		item: {
			type: Object,
			default: () => {
				return {};
			}
		},
		item2: {
			type: Object,
			default: () => {
				return {};
			}
		},
		labelWidth: {
			type: [String, Number],
			default: 120
		},
		platform: {
			type: [String],
			default: 'jd'
		}
	},
	watch: {
		item(val) {
			this.ruleForm.couponUrl = val.couponUrl;
		},
		'ruleForm.commissionShare'(val) {
			if (this.preCommission) {
				this.getPreCommission(val);
			}
		},
		'selects.coupon'(i) {
			this.$emit('coupon', this.couponList[i]);
		}
	},

	methods: {
		getPreCommission() {
			this.$service.goodsMenagement.goods
				.getPreCommission({
					endPrice: this.goodsInfo.endPrice,
					commissionShare: this.ruleForm.commissionShare
				})
				.then(res => {
					this.preCommission = res;
					this.$emit('perface', res);
				});
		},
		async searchGoods() {
			this.couponLoading = true;
			let res = null;
			if (this.platform == 'jd') {
				res = await this.$service.jd.jdActivityGoods.checkGoods({
					couponUrl: this.ruleForm.couponUrl,
					url: this.ruleForm.url,
					gid: this.ruleForm.gid
				});
			} else {
				console.log(this.$service.jd.pinduoduo);
				res = await this.$service.jd.pinduoduo.checkGood({
					couponUrl: this.ruleForm.couponUrl,
					url: this.ruleForm.url,
					gid: this.ruleForm.gid
				});
			}
			this.couponList = [...res.couponList];
			this.couponList.map((e, i) => {
				e._id = i;
				if (e.isBest == 1) {
					this.selects.coupon = i;
				}
				return e;
			});
			if (res.endPrice) {
				res.endPrice = res.endPrice.toFixed(2);
			}
			this.goodsInfo = res;
			this.$emit('goodsInfo', res);
			this.couponLoading = false;
			this.showGoodsInfo = true;
			this.ruleForm.commissionShare = res.commissionShare;
			this.getPreCommission();
		},
		submitForm(formName) {
			this.$refs[formName].validate(valid => {
				if (valid) {
					this.$emit('input', this.ruleForm);
					this.searchGoods();
				} else {
					this.$message({
						type: 'warning',
						message: '商品链接不能为空'
					});
					return false;
				}
			});
		},
		serachCoupon() {
			this.$service.jd.jdActivityGoods
				.checkCoupon({
					couponUrl: this.ruleForm.couponUrl
				})
				.then(res => {
					res.link = this.ruleForm.couponUrl;
					this.couponList.push({
						...res
					});
					this.couponList.map((e, i) => {
						e._id = i;
						if (e.isBest == 1) {
							this.selects.coupon = i;
						}
						return e;
					});
				})
				.catch(err => {
					this.$message.error(err);
				});
		},
		resetForm(formName) {
			this.$refs[formName].resetFields();
		}
	}
};
</script>
<style lang="scss" scoped>
.coupon-info {
	padding: 0 30px;
	.coupon-info-c {
		@include flexBox(space-between, center);
	}
	.coupon-info-d {
		margin-bottom: 10px;
	}
}

.goods-info {
	margin: 21px auto;
	.info-box {
		background-color: #fcfcfc;
		@include flexBox();
		padding: 0 30px;
		// padding-left: 20px;
		.info-img {
			width: 100px;
			height: 100px;
			flex-shrink: 0;
			border-radius: 10px;
			overflow: hidden;
			img {
				width: 100%;
			}
		}
		.info-c {
			margin-left: 10px;
			width: calc(100% - 110px);
			@include flexBox(space-between, center, column);
			line-height: 20px;
			font-size: $font12;
			color: $text-grey;
			& > div:nth-child(1) {
				@include text-title;
				@include ellipsis();
				@include flexBox(space-between, center);
				width: 100%;
				& > div:nth-child(1) {
					@include ellipsis();
					width: 500px;
				}
				& > div:nth-child(2) {
					font-weight: 400;
					font-size: $font12;
					color: $text-grey;
				}
			}
			& > div:nth-child(2) {
				color: #666666;
				width: 100%;
			}
			& > div:nth-child(3) {
				width: 100%;
			}
			& > div:nth-child(4) {
				width: 100%;
				@include flexBox(space-between, flex-start);
				div {
					color: $text-title;
				}
				span {
					color: #f14d27;
					font-size: $font14;
					font-weight: bold;
				}
			}
			& > div:nth-child(5) {
				width: 100%;
			}
		}
	}
}
.commissionShare-number {
	display: flex;
	justify-content: space-between;
	div {
		color: red;
	}
}
</style>
